<template>
	<div class="wrapper">
			<img src="../../assets/user.jpg" class="wrapper_img">
			<div class="wrapper_input">
				<input type="text" class="wrapper_input_content" placeholder="请输入手机号" v-model="data.username">
			</div>
			<div class="wrapper_input">
				<input type="password" class="wrapper_input_content" placeholder="请输入密码" v-model="data.password">
			</div>
			<div class="wrapper_input">
				<input type="password" class="wrapper_input_content" placeholder="确认密码" v-model="data.confirmPassword">
			</div>
			<div class="wrapper_login-button" @click="handleRegisterClick">注册</div>
			<div class="wrapper_login-link" @click="handleLoginClick">已有帐号去登陆</div>
			<Toast v-if="data.showToast" :message='data.toastMessage' />
		</div>
</template>

<script>
	import Toast from '../../components/Toast.vue'
	import { useStore } from 'vuex'
		import { useRouter } from 'vue-router'
		import { reactive } from 'vue'
		import { get } from '../../utils/request.js'
		export default {
			name: 'Register',
			components: { Toast },
			setup() {
				const router = useRouter();
				const store = useStore();
				// 初始化数据
				const data = reactive({
					username: '',
					password: '',
					confirmPassword: '',
					showToast: false,
					toastMessage: ''
				})
				// 定义错误弹框方法
				const errMessage = (err) => {
					data.showToast = true
					data.toastMessage = err
					setTimeout(() => {
						data.showToast = false
						data.toastMessage = ''
					}, 2000)
				}
				// 登陆页面跳转
				const handleLoginClick = () => {
					router.push({
						name: 'Login'
					})
				}
				// 注册事件处理
				const handleRegisterClick = async () => {
					// 判断账号 密码 确认密码是否为空
					if(data.username != '' && data.password != '' && data.confirmPassword != '')
					{
						// 判断密码与确认密码是否一致
						if(data.password == data.confirmPassword)
						{
							try {
								// 将表单中数据以post方法提交到对应接口
								const result = await get('/api/register', {
									username: data.username,
									password: data.password
								})
								console.log(result)
								if(result?.errno === 1){
									errMessage(result?.message)
								}
								// 返回数据集errno恒等于0 则注册成功 跳转主页
								if(result?.errno === 0){
									let username = data.username
									let userpassword = data.password
									
									store.commit("account", { username,userpassword });
									
									errMessage('注册成功,正在跳转')
									setTimeout(() => {
									data.showToast = false
									data.toastMessage = ''
									localStorage.isLogin = true;
									router.push({name: 'Login'})
								}, 2000)
								}else{
									errMessage(result?.message)
								}
							} catch(e){
								console.log(data.password)
								alert('连接失败'+e)
							}
						}else
						{
							errMessage('两次密码输入不一致！')
						}
					}else{
						errMessage('账号密码不能为空！')
					}
					
				}
				return{ handleLoginClick,handleRegisterClick,data }
			},
	
		}
</script>

<style lang="scss" scoped>
	.wrapper {
		position: absolute;
		top: 40%;
		left: 0;
		right: 0;
		transform: translateY(-50%);
		overflow-y: visible;
		&_img {
			display: block;
			margin: 0 auto .4rem auto;
			width: .66rem;
			height: .66rem;
		}
		&_input {
			height: .48rem;
			margin: 0 .4rem .16rem .4rem;
			padding: 0 .16rem;
			background: #F9F9F9;
			border: 1px solid rgba(0,0,0,0.1);
			border-radius: 6px;
			&_content {
				line-height: .48rem;
				border: none;
				outline: none;
				width: 100%;
				background: none;
				font-size: .16rem;
				color: #777;
				&::placeholder {
					color: #777;
				}
			}
		}
		&_login-button {
			margin: .32rem .4rem .16rem .4rem;
			line-height: .48rem;
			background: #0091FF;
			box-shadow: 0 .04rem .08rem 0 rgba(0,145,255,0.32);
			border-radius: .04rem;
			color: #fff;
			font-size: .16rem;
			text-align: center;
		}
		&_login-link {
			font-size: .14rem;
			text-align: center;
			color: #777;
		}
	}
</style>